import React, { Component } from 'react';
import { connect } from 'dva';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';
import { Card } from 'antd';
import { Link } from 'dva/router';


@connect((state, ownProps) => {
    const { articles:  { entities } } = state
    const { match: { params: {id} } } = ownProps
    return {
        ...entities[id]
    } 
})
class Show extends Component {


    componentDidMount() {
        const { match: { params: { id }} } = this.props
        const { id: articleId } = this.props
        if(!articleId){
            this.props.dispatch({
                type: 'articles/getArticleById',
                articleId: id
            })
        }
        
    }

    componentDidUpdate(prevProps) {
        const { match: { params: { id: oldid } } } = prevProps
        const { match: { params: { id: newid } } } = this.props
        if (oldid && newid && newid !== oldid) {
            this.props.dispatch({
                type: 'articles/getArticleById',
                articleId: newid
            })
        }
    }


    render() {
        const { title, content } = this.props

       return (
            <PageHeaderLayout
                title={title}
            >
                <Card bordered={false}>
                    <div>
                        <h1>{title}</h1>
                        <p>{content}</p>
                        <Link to="/articles/show/1">Link to 2</Link>
                    </div>
                </Card>
            </PageHeaderLayout>
       )
   }
}

export default Show